// 1.导入读写文件模块
const fs = require('fs')
// 1.2导入处理路径模块
const path = require('path')
// 2.定义要检索的正则
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

// 3.读取html文件
fs.readFile(path.join(__dirname, '/files/index.html'), 'utf8', function (err, datastr) {
    if (err) {
        return console.log('读取文件 失败');
    }
    console.log('读取文件成功');
    // 分割css、js、html的方法
    resolveCss(datastr)
    resolveJs(datastr)
    resolveHtml(datastr)
})

// 4.分割css
function resolveCss(html) {
    // 4.1.使用正则exec方法检索css文件 注意exec方法检索成功返回的是数组 失败返回null
    const r1 = regStyle.exec(html)
    // 4.2 替换style标签为空 
    const newCss = r1[0].replace('<style>', '').replace('</style>', '')
    // 4.3替换完成后写入到clock目录单独存放至css文件
    fs.writeFile(path.join(__dirname, '/clock/index.css'), newCss, 'utf8', err => {
        if (err) {
            return console.log('写入文件 失败');
        }
        console.log('写入文件 成功');

    })
}
// 5.分割js
function resolveJs(html) {
    // 5.1.使用正则exec方法检索js文件 注意exec方法检索成功返回的是数组 失败返回null
    const r1 = regScript.exec(html)
    // 5.2 替换style标签为空 
    const newJs = r1[0].replace('<script>', '').replace('</script>', '')
    // 5.3替换完成后写入到clock目录单独存放至js文件
    fs.writeFile(path.join(__dirname, '/clock/index.js'), newJs, 'utf8', err => {
        if (err) {
            return console.log('写入文件 失败');
        }
        console.log('写入文件 成功');

    })
}
// 6.分割html
function resolveHtml(htmlstr) {
    // 6.1.将html文档的css、js 替换为 外联式 链接
    const newHtml = htmlstr.replace(regStyle, '<link rel="stylesheet" href="/clock/index.css"/>').replace(regScript, '<script src="/clock/index.js"></script>')
    // 6.2 替换完成后的html文档 写入clock目录里
    fs.writeFile(path.join(__dirname, '/clock/index.html'), newHtml, 'utf8', err => {
        if (err) {
            return console.log('写入文件 失败');
        }
        console.log('写入文件 成功');

    })
}